<template>
	<view class="content">
		<!-- 缺省 页面 -->
		<view class="NoDataView content" v-if="!hasOrder">
			<image src="../../../static/image/mine/myOrder/img_Nodata.png" style="width: 356rpx;height: 255rpx;"></image>
			<text>暂无订单</text>
			<image src="../../../static/image/mine/myOrder/img_goLook.png" style="width: 327rpx;height: 101rpx;" @click="toShop"></image>
		</view>
		<!-- 订单列表 -->
		<view v-else>
			<view class="order-item" v-for="(item,index) in orderList" :key="index">
				<view class="order-item-Tv">
					<text class="order-item-Tv-T1 ML24">订单号:{{ item.orderId }}</text>
					<text class="order-item-Tv-T2 MR24">{{item.OrderState}}</text>
				</view>
				<view class="order-item-line1"></view>
				<view class="order-item-Cv">
					<image class="ML24" :src="item.thumbnail"></image>
					<view class="order-item-Cv-R MR24">
						<text class="order-item-Cv-R-T1">{{item.goodsName}}</text>
						<view class="order-item-Cv-R-Cv" style="margin-top: 40rpx;">
							<text></text>
							<text>X{{item.quantity}}</text>
						</view>
						<view class="order-item-Cv-R-Bv MR24">
							<text class="order-item-Cv-R-Bv-T1">共{{item.quantity}}件商品 合计:</text>
							<text class="order-item-Cv-R-Bv-T2" style="margin-left: 10rpx;">{{item.amount}}</text>
							<text class="order-item-Cv-R-Bv-T3" style="margin-left: 10rpx;">爱豆</text>
						</view>
					</view>
				</view>
				<view class="order-item-line2"></view>
				<!-- 操作区 -->
				<view class="order-item-Bv">
					<text class="order-item-Bv-T1 ML24">{{item.date}}</text>
					<view class="order-item-Bv-R MR24">
						<!-- 待发货 -->
						<!-- <image v-if="item.state == 2" class="order-item-Bv-R-Lbtn" src="../../../static/image/mine/myOrder/icon_cancel.png" @click="dealBtnL(2,index)"></image> -->
						<image v-if="item.state == 2" class="order-item-Bv-R-Rbtn" src="../../../static/image/mine/myOrder/icon_disable_enter.png"></image>
						<!-- 待收货 -->
						<image v-if="item.state == 3" class="order-item-Bv-R-Lbtn" src="../../../static/image/mine/myOrder/icon_catWu.png" @click="dealBtnL(3,index)"></image>
						<image v-if="item.state == 4" class="order-item-Bv-R-Rbtn" src="../../../static/image/mine/myOrder/icon_enter.png" @click="dealBtnR(4,index)"></image>
						<!-- 交易成功 -->
						<image v-if="item.state == 5" class="order-item-Bv-R-Rbtn" src="../../../static/image/mine/myOrder/icon_once.png" @click="dealBtnR(5,index)"></image>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as api from '@/api/login';
export default {
	data() {
		return {
			userId: '',
			hasOrder: true, //是否 存在订单信息
			orderList:[],  //订单列表
			orderNum: '',
			price:2000,
		};
	},
	onLoad() {
		this.userId = this.$store.state.userInfo.currentUser.userId;
		this.getMyOrderList();
	},
	methods: {
		getMyOrderList() {
			let that = this;
			let userId = this.userId;
			let data = {
				userId: userId,
				action: 'getMyOrderList'
			};
			api.getMyorderList(data).then(function(res) {
					console.log(res);
					let orderList = res.data.data.orderList.reverse();
					if (res.data.code === 2000) {
						// 没有订单信息
						if (orderList.length == 0) {
							that.hasOrder = false;
							return;
						}
						// 订单数据处理
						that.dealOrderList(orderList);
					}
				}).catch(function(error) {
					console.log('getHeadshot fail', error);
				});
		},
		// 处理订单列表
		dealOrderList(orderList){
			let that = this;
			orderList.forEach((item,index) => {
				if(item.state == 2) {
					item.OrderState = '待发货';
				}else if(item.state == 3) {
					item.OrderState = '待收货';
				}else if(item.state == 4) {
					item.OrderState = '已签收';
				}else if(item.state == 5) {
					item.OrderState = '交易完成';
				}else if(item.state == 12) {
					item.OrderState = '已退款';
				}
			});
			that.orderList = orderList.reverse();
		},
		// 底部按钮操作 -----L-----
		/* 
			2021.10.8 暂时 取消  "取消订单" 、"删除记录"   
		*/
		dealBtnL(flag,index){
			let orderInfo = this.orderList[index];
			if(flag == 2) {
				// 取消订单   
				// this.cancelOrder(this.orderList[index].orderId);
			}else if(flag == 3) {
				// 查看物流
				uni.navigateTo({
					url:'logisticDetail/logisticDetail?orderInfo='+JSON.stringify(orderInfo)
				});
			} else if(flag == 5) {
				// 删除记录
			}
		},
		//  -----R-----
		dealBtnR(flag,index) {
			if(flag == 4){
				// 确认收货
				this.confirmReceipt(this.orderList[index].orderId);
			}else if(flag == 5) {
				console.log('再来一单');
				// 再来一单  跳转到商城 携带商品id进入详情页
				uni.switchTab({
					url:'../../shopMall/shopMall'
				})
			}
		},
		// 确认收货
		confirmReceipt(orderId){
			let that = this;
			let userId = this.userId;
			let data = {
				userId: userId,
				action: 'confirmReceipt',
				params:{
					orderId:orderId
				}
			};
			api.confirmReceipt(data).then(function(res) {
					console.log(res);
					if(res.data.code === 2000) {
						that.$toast(res.data.message);
						if(res.data.message == "确认收货成功"){
							that.getMyOrderList();
						}
					}
				}).catch(function(error) {
					console.log('confirmReceipt fail', error);
			});
		},
		// 取消订单
		cancelOrder(orderId){
			console.log('订单号>>'+orderId);
			let that = this;
			let userId = this.userId;
			let data = {
				userId: userId,
				action: 'cancelOrder',
				params:{
					orderId:orderId
				}
			};
			api.cancelOrder(data).then(function(res) {
					console.log(res);
					if(res.data.code === 2000) {
						uni.showToast({
							title: '订单已取消',
						});
					}
				})
				.catch(function(error) {
					console.log('cancelOrder fail', error);
				});
		},
		// 去逛一逛
		toShop() {
			uni.switchTab({
				url: '../../shopMall/shopMall'
			});
		}
	}
};
</script>

<style>
page {
	background-color: #ebebeb;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.NoDataView {
	margin-top: 200rpx;
	width: 100%;
	height: 100%;
}
.NoDataView text {
	font-size: 32rpx;
	font-family: Source Han Sans SC;
	font-weight: normal;
	color: #999999;
	line-height: 40rpx;
	margin: 28rpx auto 70rpx;
}
.order-item {
	margin-top: 20rpx;
	width: 702rpx;
	background-color: white;
	border-radius: 15rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.order-item-Tv {
	width: 100%;
	margin-top: 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.order-item-Tv-T1 {
	font-size: 25rpx;
	font-family: Source Han Sans SC;
	font-weight: normal;
	color: #333333;
}

.order-item-Tv-T2 {
	font-size: 26rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #ff8d38;
	line-height: 20px;
}
.order-item-line1 {
	margin-top: 24rpx;
	width: 670rpx;
	height: 12rpx;
	background-color: #F8F8F8;
}
.order-item-line2 {
	margin-top: 32rpx;
	width: 684rpx;
	height: 2rpx;
	background-color: #E8E8E8;
}
.order-item-Cv,.order-item-Cv-R-Cv{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.order-item-Cv{
	padding: 10rpx 0;
}
.order-item-Cv-R-Cv text {
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #999999;
	line-height: 20px;
}
.order-item-Cv image {
	width: 174rpx;
	height: 216rpx;
}
.order-item-Cv-R {
	margin-left: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.order-item-Cv-R-T1{
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #000000;
	word-break: break-all; //如何在单词内断行
	display: -webkit-box;
	overflow: visible;
	line-height: 1.5;
	text-overflow: '';  //文本溢出处显示的内容
	-webkit-box-orient: vertical;
}

.order-item-Cv-R-Bv{
	margin-top: 36rpx;
	align-self: flex-end;
	display: flex;
	align-items: flex-end;
}

.order-item-Cv-R-Bv-T1 {
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
	line-height: 20px;
}
.order-item-Cv-R-Bv-T2 {
	font-size: 42rpx;
	font-family: DIN;
	font-weight: bold;
	color: #FF8D38;
	line-height: 23px;
}
.order-item-Cv-R-Bv-T3 {
	font-size: 18rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #FF8D38;
	line-height: 18px;
}

.order-item-Bv {
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.order-item-Bv-T1 {
	font-size: 21rpx;
	font-family: Roboto;
	font-weight: normal;
	color: #666666;
}

.order-item-Bv-R {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.order-item-Bv-R image {
	width: 117rpx;
	height: 47rpx;
}

/* 两个操作按钮 */
.order-item-Bv-R-Lbtn {
}
.order-item-Bv-R-Rbtn {
	margin-left: 20rpx;
}
/* public css */
.flex-RB {
	display: flex;
}
.ML24 {
	margin-left: 24rpx;
}
.MR24 {
	margin-right: 24rpx;
}
</style>
